import React, {
    PureComponent
} from 'react';

import {
    Text,
    Image,
    StyleSheet
} from 'react-native';

import Press from './../Press';

interface Props {
    title:string,
    message:string,
    icon: number,
    iconStyle?:any,
    onRefresh?:Function
}

import normal_empty from './icon.png';

class Empty extends PureComponent<Props> {

    static defaultProps = {
        message:``,
        icon:normal_empty,
        title:`-- No any data --`
    }

    render() {
        const {
            icon,
            title,
            message,
            children,
            iconStyle,
            onRefresh
        } = this.props;

        return (
            <Press
                onPress={onRefresh}
                disabled={!onRefresh}
                style={styles.container}
            >
                <Image
                    source={icon}
                    style={[styles.icon,iconStyle]}
                />
                {!!title && (
                    <Text style={styles.title}>
                        {title}
                    </Text>
                )}
                {!!message && (
                    <Text style={styles.message}>
                        {message}
                    </Text>
                )}
                {children}
            </Press>
        )
    }
}

export default Empty;

const styles = StyleSheet.create({
    container: {
        width:`100%`,
        height:`100%`,
        justifyContent:`center`,
        alignItems: `center`,
        flexDirection: `column`
    },
    icon: {
        marginBottom:32
    },
    title: {
        fontSize: 16,
        color: `#666`,
        lineHeight: 24,
        fontWeight:`bold`
    },
    message: {
        fontSize: 14,
        color: `#fff`,
        lineHeight: 24
    }
}) as any;